<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中兴商城ZTEmall.com_中兴手机Axon30 Pro、Axon30 Ultra、努比亚红魔6Pro、中兴路由器、中兴智能家居、官网正品保障</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/GoodsList.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/promise_ajax1.js"></script>
</head>

<body>
    <!-- 顶部导航 -->
    <div id="topbar">
        <div class="wrap-lg w">
            <div class="topbar-left cl">
                <a href="https://www.zte.com.cn/china/" rel="nofollow noopener noreferrer"
                    style="color: #fff; background-color: #008fd5;">中兴官网</a>
                <a href="https://www.ztedevices.com/cn/" rel="nofollow noopener noreferrer" target="_blank">消费者业务</a>
                <a href="http://support.zte.com.cn/support/h5index.aspx?_langType=zh-cn"
                    rel="nofollow noopener noreferrer" target="_blank">运营商业务</a>
                <a href="http://esupport.zte.com.cn" rel="nofollow noopener noreferrer" target="_blank">企业业务</a>
            </div>
            <div class="topbar-right">
                <a href="../html/login-ZTE.html" class="loginBtn">登录</a>
                <a href="../html/register-ZTE.html" class="registerBtn">注册</a>
            </div>
        </div>
    </div>
    <!-- 头部信息栏 -->
    <div id="header">
        <div class="logo">
            <a href="../html/index-ZTE.html">
                <img src="https://image.ztemall.com/bb27a3154a9d096e434aae60cd793d88.png" alt="LOGO">
            </a>
        </div>
        <form class="searchBar">
            <input type="text" class="searchCon">
            <a href="javascript:;" class="searchBtn">搜索
            </a>
        </form>
        <div class="lookGoodsCar">
            <i class="iconfont icon-gouwuche"></i>
            <a href="../html/GoodsCar-ZTE.html" class="icon-cart-a">查看购物车</a>
        </div>
    </div>
    <!-- 页面导航栏 -->
    <div class="nav">
        <div class="wrap-lg w">
            <div class="nav-left">
                <div class="goodsType">全部商品分类</div>
            </div>
            <div class="nav-main">
                <a href="">Axon30系列旗舰</a>
                <a href="">努比亚专区</a>
                <a href="">红魔专区</a>
                <a href="">智能手表</a>
                <a href="">线下门店</a>
                <a href="">线上服务站</a>
            </div>
        </div>
    </div>
    <!-- 商品列表区 -->
    <div class="main">
        <div class="main-lg w cl">
            <div class="bread-nav">
                <a href="">全部商品></a>
            </div>
            <!-- 排序框 -->
            <div class="sort-box">
                <div class="sortBar cl">
                    <div class="left">
                        <label>
                            编号
                            <input type="radio" name="orderCol" checked="" class="orderCol" value="id">
                        </label>
                        <label>
                            名称
                            <input type="radio" name="orderCol" class="orderCol" value="goodsName">
                        </label>
                        <label>
                            价格
                            <input type="radio" name="orderCol" class="orderCol" value="goodsPrice">
                        </label>
                        <label>
                            升序
                            <input type="radio" name="orderType" class="orderType" value="asc">
                        </label>
                        <label>
                            降序
                            <input type="radio" name="orderType" class="orderType" value="desc">
                        </label>
                        <div class="showNumBox">
                            <select class="select">
                                <option value="10" selected="">每页显示10条</option>
                                <option value="20">每页显示20条</option>
                                <option value="30">每页显示30条</option>
                                <option value="50">每页显示50条</option>
                            </select>
                        </div>
                    </div>
                    <div class="right">
                        <span class="num">共<em>85</em>件商品</span>
                    </div>
                </div>
            </div>
            <!-- 商品 -->
            <ul class="goods-list">
                <!-- <li>
                    <a href="./details-ZTE.html">
                        <img src="https://image.ztemall.com/65de94cb7dfa6bcfe5ba948013a4a86e.png" alt="">
                        <div class="addToCar">加入购物车</div>
                        <div class="goodsTitle">中兴 Axon 30 Ultra 5G </div>
                        <div class="price">￥4398.00 </div>
                    </a>
                </li> -->
            </ul>
            <!-- 分页 -->
            <div class="pager">
                <span class="flip next over"><i>›</i></span>
                <span class="pageTips over">1&nbsp;/&nbsp;20</span>
                <span class="flip prev over"><i>‹</i></span>
            </div>
        </div>
    </div>
    <!-- 底部导航与版权 -->
    <div class="footer">
        <div style="text-align: center;">
            <img src="https://image.ztemall.com/4838cc505d2a981c5ae09c56958d8895.png">
        </div>
        <div class="copyright">
            <span>服务协议 |隐私政策 |法律声明|</span> ©2014 - 2021 版权所有，并保留所有权利
        </div>
        <div class="footer-text" style="text-align: center;">增值电信业务经营许可证:
            <span>合字B2-20210066</span> | ICP备案证书号:<span>粤ICP备16018970号 | 粤公网安备 44030502005102号| 营业执照</span>
            <img src="https://szcert.ebs.org.cn/Images/govIcon.gif" alt="">
        </div>
    </div>
</body>
<script>
    var topbarRight = document.getElementsByClassName("topbar-right")[0];
    // 标识用户身份
    var cookie = document.cookie;
    if (cookie) {
        var user = getCookie("lgc");  //登录的用户名
        if (user) {
            topbarRight.innerHTML = `<span>欢迎您,${user}</span><button onclick="exit()">退出</button>`;
        }
    }

    function exit() {
        delCookie("lgc");
        location.reload();
    }
</script>
<script>
    var searchCon = document.getElementsByClassName("searchCon")[0];
    var searchBtn = document.getElementsByClassName("searchBtn")[0];
    var searchBar = document.getElementsByClassName("searchBar")[0];

    var sortBar = document.getElementsByClassName("sortBar")[0];
    var select = document.getElementsByClassName("select")[0];
    var pageTips = document.getElementsByClassName("pageTips")[0];


    // 声明全局变量  =>赋予默认值
    var key = "";    // "" 默认查询所有数据
    var orderCol = "id";   // 默认按照id排
    var orderType = "asc"; //默认升序
    var pageIndex = 1;   // 默认显示第一页  => 记录切换后的页码
    var showNum = 10;     //每页显示多少条
    var maxpage = 0;  //默认最大页码
    var Count = 0; //商品总数
    // 页面加载时渲染
    loadGoods();

    // 事件委托绑定点击事件
    $("body").click(function () {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        // 模糊搜索
        if (target.className == "searchBtn") {
            var searchCon = target.previousElementSibling;
            key = searchCon.value;
            loadGoods();
        } else if (target.className == "orderCol") {
            orderCol = target.value;
            loadGoods();
        } else if (target.className == "orderType") {
            orderType = target.value;
            loadGoods();
        }
    })


    // 分页切换
    select.onchange = function () {
        showNum = this.value;
        loadGoods();
    }


    function loadGoods() {
        searchGoodsOrderLimit({ key, orderCol, orderType, pageIndex, showNum }).then(data => {
            var { status, detail, list, count, maxPage } = data;
            maxpage = maxPage;
            Count = count;
            if (status) {
                var html = "";
                list.forEach(function (item) {
                    // console.log(item);
                    var { id, goodsId, goodsName, goodsImg, goodsPrice } = item;
                    html += `<li data-id="${goodsId}">
                    <a href="javascript:;">
                        <img src="${goodsImg}" alt="">
                        <div class="addToCar">加入购物车</div>
                        <div class="goodsTitle">${goodsName}</div>
                        <div class="price">￥${goodsPrice}</div>
                    </a>
                </li>`;
                })
                $(".goods-list").html(html);

                pageIndex = pageIndex > maxPage ? maxPage : pageIndex;
                pageTips.innerHTML = `${pageIndex} / ${maxPage}, 共${count}条`; // 渲染提示


                $(".num em").html(`${count}`);

                $(".goods-list li img, .goods-list li .goodsTitle, .goods-list li .price").on("click", function () {
                    event.stopPropagation();
                    var gid = $(this).parents(".goods-list li").data("id");
                    location.href = `details-ZTE.html?gid=${gid}`;
                })



            } else {
                $(".goods-list").html("暂无商品");
            }

        })

    }

    // 点击上一页
    $(".prev").click(function () {
        if (pageIndex < 2) return false;
        pageIndex--;
        $(".pageTips").html(`${pageIndex} / ${maxpage}, 共${Count}条`);
        loadGoods();
    })

    // 点击下一页
    $(".next").click(function () {
        if (pageIndex >= maxpage) return false;
        pageIndex++;
        $(".pageTips").html(`${pageIndex} / ${maxpage}, 共${Count}条`);
        loadGoods();
    })

    // 加入购物车
    $(document).on("click", ".addToCar", async function () {
        // event.stopPropagation();
        var gid = $(this).parents(".goods-list li").data("id");
        var phone = getCookie("lgc");
        var buyNum = 1;
        console.log(phone);
        if (phone) {
            var result = await addToGoodsCar({ phone, gid, buyNum });
            console.log(result);
            var { status, msg } = result;
            if (status) {
                if (confirm("购买成功,是否进入购物车？")) {
                    location.href = "./GoodsCar-ZTE.html";
                }
            } else {
                alert(msg);
            }
        } else {
            // 没用登录就返回登录页
            location.href = "./login-ZTE.html?returnUrl=" + encodeURIComponent(location.href);
        }
    })

</script>

</html>